<template>
  <div>
    <van-nav-bar
      title="收藏列表"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <ul>
      <li class="lie">
        <div class="tu">
          <img
            src=""
            alt=""
            style="width: 106px; height: 80px; margin-top: '5px'"
          />
        </div>
        <div class="bianli">
          <h3>1</h3>
          <p><span>一室/1/东/上海滩花园</span></p>
          <div class="hezi">进地铁</div>
          <div class="ab">
            <span class="aaa">1</span><span class="bbb">元/月</span>
          </div>
        </div>
      </li>
    </ul>


  </div>
</template>

<script>
export default {
  name: 'ShouChang',
  props: {},
  components: {},
  data () {
    return {}
  }
}
</script>

<style scoped lang="less">
ul {
  border-bottom: 1px solid #ccc;
  .aaaa {
    margin-left: 5%;
    height: 1px;
    width: 90%;
    background-color: #ccc;
  }
  .lie {
    height: 115px;
    .tu {
      margin-left: 14px;
      margin-top: 17px;
    }
    .bianli {
      margin-left: 10px;
      margin-top: 10px;
      .ab {
        margin-top: 3px;
        .aaa {
          display: inline-block;
          font-size: 16px;
          color: #fa604b;
        }
        .bbb {
          margin-left: 5px;
          color: #fa604b;
        }
      }
      p {
        span {
          color: #b3b6b7;
        }
      }
      .hezi {
        height: 25px;
        width: 60px;
        background-color: #e1f5f8;
        border-radius: 5px;
        line-height: 25px;
        margin-top: 2px;
        text-align: center;
        color: #75d1dc;
      }
    }
  }
}
.aa {
  margin-top: 10px;
}
.lie {
  display: flex;
  // justify-content: space-between;
  height: 110px;
  // border: 1px solid red;
}
.bb {
  width: 100%;
  height: 1px;
  background-color: #ccc;
}
</style>
